<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row> 
      <el-table-column type="expand">
      <template v-slot="props">
        <el-form  inline v-for="item in props.row.menus" :key="item.id">
          <el-form-item label="菜品名称">
            <span>{{ item.title }}</span>
          </el-form-item> 
          <el-form-item label="菜品数量">
            <span>{{ item.num }}</span>
          </el-form-item> 
        </el-form>
      </template>
    </el-table-column>
      <el-table-column align="center" label="ID">
        <template v-slot="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="下单时间">
        <template v-slot="scope">{{ scope.row.orderTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="总金额">
        <template v-slot="scope">{{ scope.row.amount }}</template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template v-slot="scope">{{ ['未完成','已完成','顾客取消'][scope.row.state] }}</template>
      </el-table-column>
      <el-table-column align="center" label="餐桌ID">
        <template v-slot="scope">{{ scope.row.tableId }}</template>
      </el-table-column>
      <el-table-column align="center" label="修改状态">
        <template v-slot="scope">
          <el-form :inline="true">
            <el-form-item>
              <el-select v-model="scope.row.state" @change="updateOrderState(scope.row)">
                <el-option :value="0" label="未完成"></el-option>
                <el-option :value="1" label="已完成"></el-option>
                <el-option :value="2" label="顾客取消"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="js">
import { orderList,updateState } from '@/api/api-v1/order'

export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetchData() {
      orderList().then(res => {
        this.list = res.data.map(item=>{
          item.menus = JSON.parse(item.menus)
          return item
        })
      })
    },
    updateOrderState(v){
      updateState(v.id,v.state).then(()=>{
        this.$message.success("修改状态成功")
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style></style>
